<template>
  <div>
    <!-- swiper start -->
    <swiper :options="swiperOptions">
      <swiper-slide>
        <img
          class="w-100"
          src="../assets/images/1316c8e4aac7bb43e1f855caf0b567df.jpeg"
        />
      </swiper-slide>
      <swiper-slide>
        <img
          class="w-100"
          src="../assets/images/af4e9f8ea5ece5a106e769ae8a568153.jpeg"
        /> </swiper-slide
      ><swiper-slide>
        <img
          class="w-100"
          src="../assets/images/ae3fba434d18e5ea8a21e50b1c3255a5.jpeg"
        />
      </swiper-slide>
      <div
        class="swiper-pagination pagination-home text-right px-3 pb-2"
        slot="pagination"
      ></div>
    </swiper>
    <!-- swiper end -->
    <!-- 导航图标 start-->
    <div class="nav-icons bg-white mt-3  text-center text-dark-1 pt-3">
      <div class="d-flex flex-wrap " :class='{"pack-up": packup}'>
        <div class="nav-item mb-3" v-for="item in spriteList" :key="item.name">
          <i class="sprite" :class="item.className"></i>
          <div class="py-2">{{item.name}}</div>
        </div>
      </div>
      <!-- 收起箭头 -->
      <div class="bg-light py-2 fs-sm" @click='handlePackUp'>
        <i class="sprite sprite-arrow mr-1" :class="{ 'arrow-up': packup}"></i>
        <span>{{packup ? '展开':'收起'}}</span>
      </div>
    </div>
    <!-- 导航图标 end-->
    <m-list-card title="新闻资讯" icon="menu" :categories="newsCats">
      <template #items="{category}">
        <router-link
          :to="`/articles/${news._id}`"
          tag="div"
          class="py-2 fs-lg d-flex"
          v-for="(news, i) in category.newsList"
          :key="i"
        >
          <span class="text-info">[{{ news.categoryName }}]</span>
          <span class="px-2">|</span>
          <span class="flex-1 text-dark-1 text-ellipsis pr-2">{{
            news.title
          }}</span>
          <span class="text-grey-1 fs-sm">{{ news.createdAt | date }}</span>
        </router-link>
      </template>
    </m-list-card>
    <!-- 英雄列表 -->
    <m-list-card title="英雄列表" icon="card-hero" :categories="heroCats">
      <template #items="{category}">
        <div class="d-flex flex-wrap" style="margin: 0 -.5rem">
          <router-link
            tag="div"
            :to="`/heroes/${hero._id}`"
            class="text-center p-2"
            v-for="(hero, i) in category.heroesList"
            :key="i"
            style="width: 20%"
          >
            <img :src="hero.avatar" alt="" class="w-100" />
            <div>{{ hero.name }}</div>
          </router-link>
        </div>
      </template>
    </m-list-card>
    <!-- <div class="card bg-white p-3 mt-3">
      <div class="card-header d-flex ai-center">
        <i class="iconfont icon-menu"></i>
        <div class="fs-xl flex-1 px-2">新闻资讯</div>
        <i class="iconfont icon-menu1"></i>
      </div>
      
      <div class="card-body pt-3">
        <div class="nav jc-between">
          <div class="nav-item active">
            <div class="nav-link">热门</div>
          </div>
          <div class="nav-item">
            <div class="nav-link">新闻</div>
          </div>
          <div class="nav-item">
            <div class="nav-link">活动</div>
          </div>
          <div class="nav-item">
            <div class="nav-link">公告</div>
          </div>
          <div class="nav-item">
            <div class="nav-link">赛事</div>
          </div>
        </div>
        <div class="pt-3">
          <swiper>
            <swiper-slide v-for="n in 5" :key="n">
              <div class="py-2" v-for="n in 5" :key="n">
                <span>[新闻]</span>
                <span>|</span>
                <span>狄某有话说｜春节回顾，2月对局环境数据盘点！</span>
                <span>03/07</span>
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>
    </div> -->
    <m-card title="精彩视频" icon="menu"></m-card>
    <m-card title="英雄列表" icon="menu"></m-card>
    <m-card title="图文攻略" icon="menu"></m-card>
  </div>
</template>

<script>
import dayjs from "dayjs";
export default {
  filters: {
    date(val) {
      return dayjs(val).format("MM/DD");
    },
  },
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: ".pagination-home",
        },
        autoplay: {
          delay: 2000,
        },
      },

      newsCats: [],
      heroCats: [],
      // 精灵图类数组
      spriteList: [
        {className: "sprite-blz", name: '爆料站'},
        {className: "sprite-gsz", name: "故事站"},
        {className: "sprite-zbsc", name: "周边商城"},
        {className: "sprite-tyf", name: "体验服"},
        {className: "sprite-xrzq", name: "新人专区"},
        {className: "sprite-rycz", name: "荣耀传承"},
        {className: "sprite-wzyd", name: "王者营地"},
        {className: "sprite-gzh", name: "公众号"},
      ],
      packup: true
    };
  },
  methods: {
    // 导航图标模块收起与展开
    handlePackUp() {
      console.log('packup');
      // this.spriteList = this.spriteList.splice(0, 4)
      this.packup = !this.packup
    },
    async fetchNewsCats() {
      const res = await this.$http.get("news/list");
      this.newsCats = res.data;
    },
    async fetchHeroCats() {
      const res = await this.$http.get("heroes/list");
      this.heroCats = res.data;
      console.log(this.heroCats);
    },
  },
  created() {
    this.fetchNewsCats();
    this.fetchHeroCats();
  },
};
</script>

<style lang="scss">
@import "../assets/scss/variables";
.arrow-up {
  transform: rotate(180deg)
}
.pack-up {
  height: 4.6153rem;
  overflow: hidden;
}
.pagination-home {
  .swiper-pagination-bullet {
    opacity: 1;
    border-radius: 0.1538rem;
    background: map-get($colors, "white");

    &.swiper-pagination-bullet-active {
      background: map-get($colors, "info");
    }
  }
}

.nav-icons {
  border-top: 1px solid $border-color;
  border-bottom: 1px solid $border-color;
  .nav-item {
    width: 25%;
    border-right: 1px solid $border-color;
    &:nth-child(4n) {
      border-right: node;
    }
  }
}
</style>
